<template>
    <div id="center">
        <div class="up">
            <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
                <!-- <p class="ml-3 colorBlue fw-b ">{{item.title}}</p> -->
                <p class="ml-3 colorBlue fw-b num-correcton">{{item.title}}</p>
                <div>
                    <dv-digital-flop :config="item.number" style="width:1.25rem;height:.625rem;" />
                </div>
            </div>
        </div>
        <div class="down">
            <div class="ranking bg-color-black">
                <span style="color:#5cd9e8">
                    <icon name="align-left"></icon>
                </span>
                <!-- <span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span> -->
                <span class="fs-xl text mx-2 mb-1">未来天气预报标榜</span>
                <dv-scroll-ranking-board :config="ranking" style="height:2.75rem" />
            </div>
            <div class="percent">
                <div class="item bg-color-black">
                    <!-- <span>今日任务通过率</span> -->
                    <span>本校男生占比</span>
                    <centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
                </div>
                <div class="item bg-color-black">
                    <!-- <span>今日任务达标率</span> -->
                    <span>本校女生占比</span>
                    <centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
                </div>
                <div class="water">
                    <dv-water-level-pond :config="water" style="height: 1.5rem" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import centerChart from "@/components/echart/center/centerChartRate";
    import api from '@/api'

    export default {
        data() {
            return {
                titleItem: [],
                ranking: {
                    data: [],
                    sort:false,
                },
                water: {
                    // data: [24, 45],
                    data: [24, 36.1],
                    shape: "roundRect",
                    formatter: "{value}%",
                    waveNum: 3
                },
                // 通过率和达标率的组件复用数据
                rate: [{
                        id: "centerRate1",
                        // tips: 60,
                        tips: 73.2,
                        colorData: {
                            textStyle: "#3fc0fb",
                            series: {
                                color: ["#00bcd44a", "transparent"],
                                dataColor: {
                                    normal: "#03a9f4",
                                    shadowColor: "#97e2f5"
                                }
                            }
                        }
                    },
                    {
                        id: "centerRate2",
                        // tips: 40,
                        tips: 26.8,
                        colorData: {
                            textStyle: "#67e0e3",
                            series: {
                                color: ["#faf3a378", "transparent"],
                                dataColor: {
                                    normal: "#ff9800",
                                    shadowColor: "#fcebad"
                                }
                            }
                        }
                    }
                ]
            };
        },
        components: {
            centerChart
            // centerChart1,
            // centerChart2
        },
        mounted() {
            this.loadData();
            this.timerMy();
        },
        methods: {
            /*定时函数  打开之后的当天晚上的0点刷新数据 */
            timerMy() {
                const startTime = new Date(); //当前时间
                const endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 *
                    1000 + 300000); // 当天24:00 过了10000毫秒
                const endTime1 = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -
                    1000); // 当天23:59
                const timeTnterval = endTime - startTime;
                // console.log("当前时间", startTime);
                // console.log("当天24点时间", endTime);
                // console.log("时间间隔", timeTnterval);
                setTimeout(() => {
                    this.timerMy(); //实现循环定时
                    this.loadData(); //刷新页面
                }, timeTnterval);
            },
            /*从服务器获取倒计时数据*/
            async loadData() {
                const dataEnglishCETArray = [];
                const dataOlympicsArray = [];
                const dataPostgraduateExamsArray = [];
                const dataSpringFestivalArray = [];
                const highArray = [];
                const lowArray = [];

                const result = await Promise.all([
                    this.$http.post(api.data.showData),
                    this.$http.get('http://wthrcdn.etouch.cn/weather_mini?city=张家口'),
                ]);

                if (result[0].code == 0 && result[1].status == 1000) {
                    dataEnglishCETArray.push(result[0].timeDifference.EnglishCET);
                    dataOlympicsArray.push(result[0].timeDifference.Olympics);
                    dataPostgraduateExamsArray.push(result[0].timeDifference.postgraduateExams);
                    dataSpringFestivalArray.push(result[0].timeDifference.SpringFestival);

                    highArray.push(parseInt(result[1].data.forecast[0].high.replace(/[^0-9]/ig, "")));
                    lowArray.push(parseInt(result[1].data.forecast[0].low.replace(/[^0-9]/ig, "")));

                    for (let i = 0; i < 5; i++) {
                        let weather = {};
                        weather.name = result[1].data.forecast[i].date;
                        weather.value = result[1].data.forecast[i].type;
                        this.ranking.data.push(weather);
                        // console.log("释放空间上的反抗集散地和", this.ranking.data)
                    }
                    this.titleItem = [{
                            title: "今天距离冬奥会还有",
                            number: {
                                number: dataOlympicsArray,
                                toFixed: 0,
                                content: "{nt}"
                            }
                        },
                        {
                            title: "今天距离研究生入学考试",
                            number: {
                                number: dataPostgraduateExamsArray,
                                toFixed: 0,
                                content: "{nt}"
                            }
                        },
                        {
                            title: "今天距离2021年春节",
                            number: {
                                number: dataSpringFestivalArray,
                                toFixed: 0,
                                // content: "{nt}"
                                content: "{nt}"
                            }
                        },
                        {
                            title: "今天距离四六级考试",
                            number: {
                                number: dataEnglishCETArray,
                                toFixed: 0,
                                content: "{nt}",
                                //textAlign: 'center'
                            }
                        },
                        {
                            title: "今日最高温度",
                            number: {
                                number: highArray,
                                toFixed: 0,
                                content: "{nt}"
                            }
                        },
                        {
                            title: "今日最低温度",
                            number: {
                                number: lowArray,
                                toFixed: 0,
                                content: "{nt}"
                            }
                        }
                    ];
                    this.ranking = {
                        ...this.ranking
                    };
                } else {
                    this.$message.error(res.msg)
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    #center {
        display: flex;
        flex-direction: column;

        .up {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            .item {
                border-radius: 0.0625rem;
                padding-top: 0.2rem;
                margin-top: 0.1rem;
                width: 32%;
                height: 0.875rem;
            }

            .num-correcton {
                margin-bottom: 0px;
            }
        }

        .down {
            padding: 0.07rem 0.05rem;
            padding-bottom: 0;
            width: 100%;
            display: flex;
            height: 3.1875rem;
            justify-content: space-between;

            .bg-color-black {
                border-radius: 0.0625rem;
            }

            .ranking {
                padding: 0.125rem;
                width: 59%;
            }

            .percent {
                width: 40%;
                display: flex;
                flex-wrap: wrap;

                .item {
                    width: 50%;
                    height: 1.5rem;

                    span {
                        margin-top: 0.0875rem;
                        display: flex;
                        justify-content: center;
                    }
                }

                .water {
                    width: 100%;
                }
            }
        }
    }
</style>